<template>
    <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户中心</el-breadcrumb-item>
        </el-breadcrumb><br>
        <div class="top_btn">
            <div>
                <el-radio-group v-model="radio" @change="apply_list">
                    <el-radio-button label="全部"></el-radio-button>
                    <el-radio-button label="全部申请"></el-radio-button>
                    <el-radio-button label="待审核"></el-radio-button>
                    <el-radio-button label="审核结束"></el-radio-button>
                    <el-radio-button label="审核失败"></el-radio-button>
                </el-radio-group>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="create_user"></el-button>
        </div>
        <div>
                    <!-- 全部用户信息数据 -->
            <el-table
            :data="user_list"
            style="width: 100%" v-if="all_show">
                <el-table-column
                    prop="id"
                    label="用户ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="photo"
                    label="头像"
                    width="180">
                    <template slot-scope="scope">            
                        <img :src="config['uploadurl'] + scope.row.photo"  min-width="70" height="70" />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="pid"
                    label="权限等级"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="weibo"
                    label="微博id">
                </el-table-column>
                <el-table-column
                    prop="dingding"
                    label="钉钉id"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="创建时间">
                </el-table-column>
            </el-table>
            <!-- 全部申请数据 -->
            <el-table
            :data="all_applys_list"
            style="width: 100%" v-if="all_examine">
                <el-table-column
                    prop="id"
                    label="申请ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="user"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="apply"
                    label="要申请的权限"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="申请时间">
                </el-table-column>
                <el-table-column
                    prop="is_delete"
                    label="审批状态">
                </el-table-column>
            </el-table>
            <!-- 等待审核完成数据 -->
            <el-table
            :data="new_applys_list"
            style="width: 100%" v-if="to_be_examine">
                <el-table-column
                    prop="id"
                    label="申请ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="user"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="apply"
                    label="要申请的权限"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="申请时间">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">通过</el-button><br>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">拒绝</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 审核完成的数据 -->
            <el-table
            :data="end_apply_list"
            style="width: 100%" v-if="examine_end">
                <el-table-column
                    prop="id"
                    label="申请ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="user"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="apply"
                    label="要申请的权限"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="申请时间">
                </el-table-column>
                <el-table-column
                    label="状态">
                    申请成功
                </el-table-column>
            </el-table>
            <!-- 审核失败的数据 -->
            <el-table
            :data="bad_apply_list"
            style="width: 100%" v-if="examine_bad">
                <el-table-column
                    prop="id"
                    label="申请ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="user"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="apply"
                    label="要申请的权限"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="申请时间">
                </el-table-column>
                <el-table-column
                    label="状态">
                    申请失败
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-form label-width="80px" class="demo-ruleForm" v-if="create_table">
                <center><p>添加用户</p></center>
                <el-form-item label='用户名'>
                    <el-input placeholder='请输入用户名' v-model="user_username"></el-input>
                </el-form-item>
                <el-form-item label='密码'>
                    <el-input placeholder='请输入密码' type="password" v-model="user_password1"></el-input>
                </el-form-item>
                <el-form-item label='确认密码'>
                    <el-input placeholder='请确认密码' type="password" v-model="user_password2"></el-input>
                </el-form-item>
                <el-form-item label="用户权限">
                    <el-select v-model="user_apply" placeholder="权限等级">
                    <el-option label="客户" value="1"></el-option>
                    <el-option label="仓库" value="2"></el-option>
                    <el-option label="商家" value="3"></el-option>
                    <el-option label="客服" value="4"></el-option>
                    <el-option label="管理员" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='验证码'>
                    <el-input placeholder='输入验证码' v-model="user_code"></el-input>
                    <!-- 图片验证码链接,点击即可重新获取验证码图片 -->
                    <img src="http://127.0.0.1:8000/img_code/" alt="" target="_blank">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="user_created">添加</el-button>
                    <el-button type="primary" @click="re_create">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
    
</template>

<script>
import {get_user_list_get, get_apply_list_get, get_update_apply_get,get_create_user_get} from './axios_api/api.js'

import {config} from '../confi.js'
export default {
    data(){
        return {
            user_list: [],
            radio: '全部',
            all_show: true,
            all_examine: false,
            to_be_examine: false,
            examine_end: false,
            examine_bad: false,
            // 等待管理员审核的数据
            new_applys_list: [],
            // 审核结束的数据,
            end_apply_list: [],
            // 审核失败的数据,
            bad_apply_list: [],
            // 全部数据
            all_apply_list: [],

            create_table: false,

            user_username: '',
            user_password1: '',
            user_password2: '',
            user_apply: '',
            user_code: '',
            config: ''
            
        }
    },
    mounted() {
        this.get_user_list();
        
        this.get_apply_list();

        this.config = config
    },
    methods: {
        get_user_list(){
            let uid = localStorage.getItem('uid');
            let pid = localStorage.getItem('pid');
            get_user_list_get({uid: localStorage.getItem('uid'),pid: localStorage.getItem('pid')}).then(res => {
                console.log(res);
                this.user_list = res.user_list;
            })
        },
        // 按钮选项权限判断
        apply_list(label) {
            console.log(this.radio)
            if(this.radio == '待审核' || this.radio == '审核结束' || this.radio == '全部申请' || this.radio == '审核失败'){
                let pid = localStorage.getItem('pid');
                if(pid == '5'){
                    if(this.radio == '全部申请'){
                        this.all_show = false
                        this.all_examine = true
                        this.to_be_examine = false;
                        this.examine_end = false
                        this.examine_bad = false
                    }else if(this.radio == '待审核'){
                        this.all_show = false
                        this.all_examine = false
                        this.to_be_examine = true;
                        this.examine_end = false
                        this.examine_bad = false
                    }else if(this.radio == '审核结束'){
                        this.all_show = false
                        this.all_examine = false
                        this.to_be_examine = false;
                        this.examine_end = true
                        this.examine_bad = false
                    }else{ // 审核失败的信息
                        this.all_show = false
                        this.all_examine = false
                        this.to_be_examine = false;
                        this.examine_end = false
                        this.examine_bad = true
                    }
                }else {
                    alert('权限不足,无法访问')
                    this.radio = '全部'
                    return false
                }

            }else {
                this.all_show = true
                this.all_examine = false
                this.to_be_examine = false;
                this.examine_end = false
                this.examine_bad = false
            }
                
        },
        // 获取申请信息
        get_apply_list(){
            get_apply_list_get().then(res => {
                console.log(res)
                for(let i = 0; i < res.apply_list.length;i++){
                    console.log(res.apply_list[i]);
                    if(res.apply_list[i].is_delete == 0){
                        this.new_applys_list.push(res.apply_list[i]);
                    }else if(res.apply_list[i].is_delete == 1){
                        this.end_apply_list.push(res.apply_list[i]);
                    }else {
                        this.bad_apply_list.push(res.apply_list[i]);
                    }
                }
                this.all_applys_list = res.apply_list;
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
            row.is_delete = 1
            get_update_apply_get(row).then(res => {
                console.log(res)
            })
        },
        handleDelete(index, row) {
            console.log(index, row);
            row.is_delete = 2
            get_update_apply_get(row).then(res => {
                console.log(res)
            })
        },
        //创建用户
        create_user() {
            this.create_table = !this.create_table;
            this.all_show = false;
            this.all_examine = false;
            this.to_be_examine = false;
            this.examine_end = false;
            this.examine_bad = false;
        },
        re_create() {
            this.create_table = !this.create_table;
            this.all_show = true;
            this.all_examine = false;
            this.to_be_examine = false;
            this.examine_end = false;
            this.examine_bad = false;
        },
        user_created() {
            
            if(this.user_username.length < 2 || this.user_username.length > 10){
                alert('你的用户名不符合规范');
                return false
            }
            if(this.user_password1.length < 6 | this.user_password1.length > 16){
                alert('你的密码不符合规范');
                return false
            }
            if(this.user_password1 != this.user_password2){
                alert('两次输入的密码不一致');
                return false
            }
            if(!this.user_code){
                alert('请输入验证码');
                return false
            }
            get_create_user_get({'username': this.user_username,'password1':this.user_password1,'apply': this.user_apply,'code': this.user_code}).then(res => {
                console.log(res);
            })
            
        }

    }
}
</script>

<style scoped>
    .top_btn {
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>